
{extend name='public/window' /}

{block name="content"}

<link href="__PLUG__/bootstrap-3.3.7/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
<script src="__PLUG__/bootstrap-3.3.7/js/bootstrap.min.js?v=3.3.7"></script>

<link rel="stylesheet" type="text/css" href="__PLUG__/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="__PLUG__/webuploader/webuploader-demo.css">

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body" style="padding: 15px;">
            <p class="layui-elem-quote">素材上传类型：</p>

            <form class="layui-form" action="" lay-filter="component-form-group" enctype="multipart/form-data">

                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">素材类型</label>
                    <div class="layui-input-block input-custom-width">
                        <input type="radio" name="type" lay-filter="rad" value="1" title="图片" checked>
                        <input type="radio" name="type" lay-filter="rad" value="2" title="文件" >
                    </div>
                </div>

                <div class="layui-form-item imgs">
                    <div class="wrapper wrapper-content animated fadeIn">
                        <div class="row">

                            <div class="col-sm-12">
                                <div class="ibox float-e-margins">

                                    <div class="ibox-content">
                                        <div class="page-container">

                                            <div id="uploader" class="wu-example">
                                                <input type="hidden" id="images" name="" class="layui-input" lay-verify="" lay-reqText="请先上传图片" style="width: 100%"> <!--存放图片路径-->
                                                <div class="queueList">
                                                    <div id="dndArea" class="placeholder">
                                                        <div id="filePicker"></div>
                                                        <p>或将照片拖到这里，单次最多可选300张</p>
                                                    </div>
                                                </div>
                                                <div class="statusBar" style="display:none;">
                                                    <div class="progress">
                                                        <span class="text">0%</span>
                                                        <span class="percentage"></span>
                                                    </div>
                                                    <div class="info"></div>
                                                    <div class="btns">
                                                        <div id="filePicker2"></div>
                                                        <div class="uploadBtn">开始上传</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <div class="layui-form-item files" style="display: none" >

                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr><th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr></thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    </div>
                </div>

                <div class="layui-form-item layui-layout-admin " style="width: 100%">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0px;text-align: center;">
                            <button class="layui-btn" lay-submit="" lay-filter="add">关闭</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<!-- Web Uploader -->
<script type="text/javascript">
    var ul="__PLUG__/";
    // 添加全局站点信息
    var BASE_URL = ul+'webuploader';  //webupload 地址
    var up_load="{:url('Common/upWebupload')}"  //图片上传地址
    var val_id="images"; //存储上传图片的ID
</script>

<script src="__PLUG__/webuploader/webuploader.min.js"></script>

<script src="__JS__/webuploader-demo.js"></script>

<script>
    layui.use(['element', 'form', 'jquery','lucky','upload'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        var upload = layui.upload;

        form.on("radio(rad)",function (res) {
            //console.log(res);
            var val=parseInt(res.value);
            if (val==1){
                $(".files").hide(0);
                $(".imgs").show(0);
            } else if(val==2){
                $(".files").show(0);
                $(".imgs").hide(0);
            }else {
                $(".files").hide(0);
                $(".imgs").hide(0);
            }
        });


        //多文件上传
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: "{:url('Common/UpFile')}" //文件上传地址
            ,accept: 'file'
            ,exts: 'zip|rar|pdf|txt|doc|docx|ppt|xls|xlsx'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.code==1){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


        form.on('submit(add)', function (data) {
            lucky.CloseFa();
            return false;
        });
    })
</script>

{/block}
